const Vue = require('vue')
const express = require('express')
const fs = require('fs')
const { createBundleRenderer } = require('vue-server-renderer')
const setupDevServer = require('./build/setup-dev-server')
//创建server实例
const server = express()
// 处理物理磁盘中的静态资源
server.use('/dist', express.static('./dist'))
//判断当前环境
const isProd = process.env.NODE_ENV === 'production'
let renderer
let onReady
if(isProd){
  // 执行npm run build:client生成的vue-ssr-client-manifest.json文件
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  // 执行npm run build:server生成的vue-ssr-server-bundle.json文件
  const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  //模板
  const template = fs.readFileSync('./index.template.html', 'utf-8')
  // 创建指定模板渲染函数
  renderer = require('vue-server-renderer').createBundleRenderer(serverBundle, {
    runInNewContext: false, // 推荐
    template, // （可选）页面模板
    clientManifest // （可选）客户端构建 manifest
  })

} else {
  // 开发模式 -> 监视打包构建 -> 重新生成 Renderer 渲染器
  onReady = setupDevServer(server, (serverBundle, template, clientManifest) => {
    renderer = createBundleRenderer(serverBundle, {
      template,
      clientManifest
    })
  })

}
const render = async (req, res)=>{
  /** 
  * 函数说明 
  * @第二个参数 传递给模板的参数
  */
  try {
    const html = await renderer.renderToString({
      title: '拉勾教育',
      meta: `
        <meta name="description" content="拉勾教育">
      `,
      url: req.url
    })
    res.setHeader('Content-Type', 'text/html; charset=utf8')
    res.end(html)
  } catch (err) {
    console.log(err);
    res.status(500).end('Internal Server Error.')
  }
}

// 创建路由
server.get('*', isProd ? render :
 // 等待有了 Renderer 渲染器以后，调用 render 进行渲染
 async (req, res) => { await onReady; render(req, res)} )

//启动服务
server.listen(8090, ()=>{
  console.log('Server running at port 8090.');
})
